/**
 * Created by diracsun on 2017/02/15.
 *
 */
var productctl = (function ($,commonser, g) {
    var ret = {};

    // 公用方法

    $(document).on("mouseover mouseout", ".wt-prod-menu>li",function (event) {
        if (event.type == "mouseover") {
            var prodid = $(this).data("prodid")
            $(".wt-prod-div").removeClass("wt-prod-div-hover");
            $("." + prodid).addClass("wt-prod-div-hover");
        } else if (event.type == "mouseout") {
            $(".wt-prod-div").removeClass("wt-prod-div-hover");
        }
    })

    $(document).on("click", ".wt-menu-lev2 .icon-xiala",function () {
        var menu = $(this).parent().parent().find(".wt-prod-menu");
        if (menu.hasClass("hidden")) {
            menu.removeClass("hidden")
            $(this).parent().find(".icon-xiala").css({
                "transform": "rotate(180deg)",
                "transform-origin": "center center",
                "transition": "transform 0.2s"
            })
        }
        else {
            menu.addClass("hidden")
            $(this).parent().find(".icon-xiala").css({
                "transform": "rotate(0deg)",
                "transform-origin": "center center",
                "transition": "transform 0.2s"
            })
        }
    })

    $(document).on("click",".wt-prod-tab a",function(){
        $(".wt-prod-tab>li").removeClass("active");
        $(this).parent().addClass("active");

    })

    $(document).on("mouseover mouseout",".wt-prod-div",function (event) {
        if (event.type == "mouseover") {
            var prodid = $(this).data("prodid")
            $(".wt-prod-menu>li").removeClass("wt-prod-menu-li-hover");
            $(".id" + prodid).addClass("wt-prod-menu-li-hover");
        } else if (event.type == "mouseout") {
            $(".wt-prod-menu>li").removeClass("wt-prod-menu-li-hover");
        }
    })

    /**
     * 菜单模板
     * @type {string}
     */
    var prodmenutpl=[
        '<li>',
        '<div class="cur wt-menu-lev2" style="background: #eee;">',
        '<a href="./products.html?type=${type}"><span class="text-666 padding-horizontal-sm">${lable}</span></a>',
        '<span class="iconfont icon-xiala text-xxl fr margin-right-xs text-666" style="transform:rotate(180deg)"></span></div>',
        '<ul class="wt-ul-big wt-bgw text-666 wt-prod-menu">',
        '{@each list as li}',
        '<li class="text-666 id${li.id} wt-prod-href" data-prodid="${li.id}">',
        '<a href="#" class="padding-left-xl padding-vertical-sm">${li.productName}</a>',
        '</li>',
        '{@/each}',
        '</ul>',
        '</li>',
    ].join("");

    ret.initMenu=function (req)
    {
        var req = $.extend({} , req); //默认参数
        $.when(commonser.qryLoanProductMenu(req))
            .done(function (resp) {
                if (resp.success) {
                    var menu="";
                    menu=menu+juicer(prodmenutpl,{"lable":"个人贷款","type":"12","list":resp.result.personal});
                    menu=menu+juicer(prodmenutpl,{"lable":"企业贷款","type":"11","list":resp.result.company});
                    $(".wt-prod-menu-parent").html(menu);
                }

            })

    }

    var prodtpl=[
        '{@each rows as p}',
        '<div class="pure-u-1-3 padding-right padding-top-lg "  >',
        '<div class="wt-prod-div cf ${p.id} wt-prod-href" style="position:relative;height:370px;" data-prodid="${p.id}">',
        '<img src="../../imgs/blank.gif" data-echo="${p.productImage}" style="width:100%;height:207px;" class="pure-img">',
        '<div class="" style="position: absolute;top:0px;left:0px;width:100%;">',
        '<div class="text-lg padding-horizontal padding-top-xs">${p.productName}</div>',
        '<div class="text-sm padding-vertical-xs padding-horizontal wt-apply-cond">$${p.indexShow}</div>',
        '</div>',
        '<div class="padding-vertical-sm padding-horizontal-xs text-sm text-center wt-prod-apply wt-prod-apply-icon1"  style="position: absolute;top:190px;right:24px;width:54px;">',
        '</div>',
        '<div class="padding-top-sm padding-lg text-xs text-999 wt-apply-cond wt-l3">',
        '$${p.applyCondition|limitac,3}',
        '</div>',
        '</div>',
        '</div>',
        '{@/each}',
    ].join("")

    ret.qryLoanProductArr= function (req) {
        var req = $.extend({"productStatus":"11","page":1,"rows":100,"productType":"12"} , req); //默认参数

        if(req.type!='')
            req.productType=req.type;

        $.when(commonser.qryLoanProductArr(req))
            .done(function (resp) {
                if (resp.success) {
                   $(".wt-prods-div").html(juicer(prodtpl,resp.result));
                   g.lazyimg();
                }
            })
    };

    var prodetailtpl=[
        '<div class="padding-horizontal padding-vertical pure-g">',
        '<div class="pure-u-6-24">',
        '<img style="width:220px;height:150px;" src="../../imgs/blank.gif" data-echo="${productImage}" class="pure-img">',
        // '<div class="padding-vertical text-center"> 已有<span class="text-danger"> 2045 </span>人申请</div>',
        '</div>',
        '<div class="pure-u-18-24 padding-left-xs">',
        '<div class="text-xl text-666">${productName}<span class="padding-left text-primary text-lg hidden">全线上申请 无抵押信用贷款</span></div>',
        '<div class="pure-g text-sm margin-top-xs">',
        '<div class="pure-u-1-2 text-999">',
        '<span class="strong text-666">贷款金额 : </span> 最高<span class="text-danger">${loanMoney}</span>',
        '</div>',
        '<div class="pure-u-1-2 text-999">',
        '<span class="strong text-666">贷款期限 : </span> ${loanYears}',
        '</div>',
        '</div>',
        '<div class="pure-g text-sm margin-top-xs">',
        '<div class="pure-u-1-2 text-999">',
        '<span class="strong text-666">贷款利率 : </span> ${loanRate}',
        '</div>',
        '<div class="pure-u-1-2 text-999">',
        '<span class="strong text-666">还款方式 : </span> ${repayType}',
        '</div>',
        '</div>',
            '<div class="pure-g text-xs margin-top-xs" style="background: #eee;">',
            '<div class="pure-u-1-4 text-999 padding-left" style="height:44px;line-height: 44px;">',
            '<i class="iconfont icon-qian text-lg"></i> 额度高',
            '</div>',
            '<div class="pure-u-1-4 text-999 padding-left" style="height:44px;line-height: 44px;">',
            '<i class="iconfont icon-rili text-lg"></i> 还款灵活',
            '</div>',
            '<div class="pure-u-1-4 text-999 padding-left" style="height:44px;line-height: 44px;">',
            '<i class="iconfont icon-iconbottom03 text-lg"></i> 材料简单,方便快捷',
            '</div>',
            '</div>',
        '<div class="margin-top-sm  ">',
            '<button class="pure-button pure-button-xl pure-button-primary">立即申请</button>',
        '</div>',
        '</div>',
        '</div>',
        '<ul class="wt-prod-tab text-lg cf">',
        '<li class="prodli hidden"><a href="#home" class=""></a></li>',
        '<li class="prodli text-center active"><a href="#tiaojian" class="text-999">申请条件</a></li>',
        '<li class="prodli text-center"><a href="#ziliao" class="text-999">申请资料</a></li>',
        '<li class="prodli text-center"><a href="#liucheng" class="text-999">申请流程</a></li>',
        '<li class="prodli text-center"><a href="#wenti" class="text-999">常见问题</a></li>',
        '</ul>',
        '<div class="padding-horizontal margin-top">',
        '<div id="tiaojian" class="row">',
        '<div class="text-lg strong padding-vertical-xs text-666">',
        '<i class="iconfont icon-sanjiao text-default text-primary"></i> 申请条件',
        '</div>',
        '<div style="min-height:200px;" class="padding-horizontal">',
        '<div style="border-top:1px solid #eee;">',
        '$${applyCondition}',
        '</div>',
        '</div>',
        '</div>',
        '<div id="ziliao"  class="row">',
        '<div class="text-lg strong padding-vertical-xs text-666">',
        '<i class="iconfont icon-sanjiao text-default text-primary"></i> 申请资料',
        '</div>',
        '<div style="min-height:200px;" class="padding-horizontal">',
        '<div style="border-top:1px solid #eee;">',
        '$${applyData}',

        '</div>',
        '</div>',
        '</div>',
        '<div id="liucheng"  class="row">',
        '<div class="text-lg strong padding-vertical-xs text-666">',
        '<i class="iconfont icon-sanjiao text-default text-primary"></i> 申请流程',
        '</div>',
        '<div style="min-height:200px;" class="padding-horizontal">',
        '<div style="border-top:1px solid #eee;">',
        '$${applyFlow}',
        '</div>',
        '</div>',
        '</div>',
        '<div id="wenti"  class="row">',
        '<div class="text-lg strong padding-vertical-xs text-666">',
        '<i class="iconfont icon-sanjiao text-default text-primary"></i> 常见问题',
        '</div>',
        '<div style="min-height:200px;" class="padding-horizontal">',
        '<div style="border-top:1px solid #eee;">',
        '$${commonProblem}',
        '</div>',
        '</div>',
        '</div>',
        '</div>',
].join("")

    ret.qryLoanProductDetail= function (req) {
        var req = $.extend({},req); //默认参数
        $.when(commonser.qryLoanProductDetail(req))
            .done(function (resp) {
                if (resp.success) {
                     $("#home").html(juicer(prodetailtpl,resp.result));
                    jQuery(function ($) {

                            $('.wt-prod-tab').stickUp({
                                parts: {
                                    0: 'home',
                                    1: 'tiaojian',
                                    2: 'ziliao',
                                    3: 'liucheng',
                                    4: 'wenti'
                                },
                                itemClass: 'prodli',
                                itemHover: 'active',
                                topMargin: 'auto'
                            });

                    });
                    g.lazyimg();
                }
            })
    };

    return ret;
})(jQuery,commonser, g);